<template>
    <div class="edit-user">
        <div class="title">
            <span>编辑用户信息</span>
        </div>
        <div class="edit_message">
            <div class="user_title">个人信息</div>
            <div class="user_info">
                <el-form :model="form" label-width="120px" label-position="left">
                    <el-form-item label="微信">
                        <el-input v-model="form.wechat" />
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="form.name" />
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio-group v-model="form.sex">
                            <el-radio label="男" />
                            <el-radio label="女" />
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="生日">
                        <div class="demo-date-picker">
                            <div class="block">
                                <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期" size="default" />
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="身高(cm)">
                        <el-input v-model="form.height" />
                    </el-form-item>
                    <el-form-item label="体重(kg)">
                        <el-input v-model="form.width" />
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="form.phone" />
                    </el-form-item>
                    <el-form-item label="收货地址">
                        <el-cascader :options="options" v-model="selectedOptions" @change="handleChange"
                            placeholder="请选择省/市/区">
                        </el-cascader>
                        <el-input v-model="form.address" placeholder="请输入详细地址" />
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="btnBox">
            <span class="timeBtn">
                <el-button link size="small" @click="handleRest">重置</el-button>
            </span>
            <span class="timeBtn">
                <el-button link size="small" @click="handleSave">保存</el-button>
            </span>
            <span class="timeBtn">
                <el-button link size="small" @click="handleCancle">取消</el-button>
            </span>
        </div>

    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { regionDataPlus, CodeToText } from 'element-china-area-data'
import dayJS from 'dayjs'
import { editUserInfo } from '../../api/user'
import { ElMessage, ElMessageBox } from 'element-plus'
export default defineComponent({
    name: 'editUser',
    data() {
        return {
            options: regionDataPlus,
            selectedOptions: [],
            form: {
                wechat: '',
                name: '',
                sex: '',
                birthday: '',
                height: '',
                width: '',
                phone: '',
                address: '',
            },
            str: 'YYYY-MM-DD'
        }
    },
    methods: {
        // 重置
        handleRest() {
            ElMessageBox.confirm(
                '确认重置吗？',
                '注意：',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(async() => {
                    ElMessage({
                        type: 'success',
                        message: '重置成功',
                    })
                    await this.resetUserInfo()
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '取消成功',
                    })
                })
        },
        // 保存用户信息
         handleSave() {
            // 日期格式化
            const time = dayJS(this.form.birthday).format(this.str)
            this.form.birthday = time
            // console.log(this.form)
            ElMessageBox.confirm(
                '确认保存吗？',
                '注意：',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(async() => {
                    ElMessage({
                        type: 'success',
                        message: '保存成功',
                    })
                    await editUserInfo(this.form)
                    this.$router.back()
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '取消成功',
                    })
                })
        },
        // 取消回退页面
        handleCancle() {
            this.$router.back()
        },
        // 收货地址拼接
        handleChange() {
            // console.log(this.selectedOptions)
            const detail = this.selectedOptions.map(selected => CodeToText[selected]).join('-')
            console.log('detail:', detail)
        },
        // 清空信息
        resetUserInfo() {
            this.form.wechat = ''
            this.form.name = ''
            this.form.sex = ''
            this.form.birthday = ''
            this.form.height = ''
            this.form.width = ''
            this.form.phone = ''
            this.form.address = ''
        },
    },
    created() {
        console.log(this.$route.query)
        //@ts-ignore
        this.form = this.$route.query
    }
})
</script>

<style lang="less" scoped>
.soild {
    width: 1px;
    height: 800px;
    background: #000;
    position: relative;
    top: 38px;
    left: 358px;
}

.title {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #000;
    line-height: 50px;
    font-size: 18px;
    font-weight: bold;
    text-indent: 16px;
}

.title::after {
    content: "";
    position: absolute;
    top: 44px;
    left: 364px;
    height: 616px;
    width: 1px;
    background-color: #000;
    background-size: 80px;
}

.edit_message {
    width: 100%;
    height: 460px;
    border-bottom: 1px solid #000;
    display: flex;

    .user_title {
        line-height: 460px;
        font-size: 18px;
        text-indent: 16px;
        width: 120px;
    }

    .user_info {
        width: 800px;
        padding-left: 100px;
        margin-top: 20px;

        :deep(.el-input) {
            width: 200px;
        }
    }
}

.btnBox {
    width: 450px;
    display: flex;
    justify-content: space-around;
    margin: 40px 0 0 160px;
}

.timeBtn {
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: rgb(171, 170, 170);

    .el-button.is-link,
    .el-button.is-text {
        color: white;
        font-size: 16px;
        padding: 0;
    }
    .el-button-hover-bg-color{
        background:  rgb(171, 170, 170);
    }
}
</style>
